<template>
	<view class="top">
		<view class="back-btn" @click="backPage()">
			<view class="back-icon"></view>
		</view>
		<view style="color: white;text-align: center;">活动发布</view>
		<uni-card class="card">
			<uni-section>
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" style="border-radius: 80rpx;" />
				</view>
				<view class="content">
					<view v-if="current === 0">
						<view class="items" @click="goXiangQing">
							<view class="items_left">
								<view class="items_left_top">
									阳春三月油江南活动开始报名了
								</view>
								<view class="items_left_bottom">
									2023-03-10 11:09
								</view>
							</view>
							<view class="items_right">
								<button>下架</button>
							</view>
						</view>
						<view class="items">
							<view class="items_left">
								<view class="items_left_top">
									阳春三月油江南活动开始报名了
								</view>
								<view class="items_left_bottom">
									2023-03-10 11:09
								</view>
							</view>
							<view class="items_right">
								<button>下架</button>
							</view>
						</view>
					</view>
					<view v-if="current === 1">
						<view class="items2">
							<view class="items_left">
								<view class="items_left_top">
									阳春三月油江南活动开始报名了
								</view>
								<view class="items_left_mid" style="color: red;">
									审核中
								</view>
								<view class="items_left_bottom">
									2023-03-10 11:09
								</view>
							</view>
							<view class="items_right">
								<button>删除</button>
							</view>
						</view>
						<view class="items2">
							<view class="items_left">
								<view class="items_left_top">
									阳春三月油江南活动开始报名了
								</view>
								<view class="items_left_mid" style="color: green;">
									审核成功
								</view>
								<view class="items_left_bottom">
									2023-03-10 11:09
								</view>
							</view>
							<view class="items_right">
								<button>上架</button>
							</view>
						</view>
						<view class="items2">
							<view class="items_left">
								<view class="items_left_top">
									阳春三月油江南活动开始报名了
								</view>
								<view class="items_left_mid" style="color: grey;">
									审核失败
								</view>
								<view class="items_left_bottom">
									2023-03-10 11:09
								</view>
							</view>
							<view class="items_right">
								<button>删除</button>
							</view>
						</view>
					</view>

				</view>
			</uni-section>
		</uni-card>
		<button class="bottom" @click="goFabu">
			<image src="/static/加号@3x.png"></image>
			发布活动
		</button>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 定义响应式数据
	const items = ref(['已上架', '未上架']);

	const current = ref(0);
	const colorIndex = ref(0);
	const activeColor = ref('#007aff');
	const styleType = ref('button');
	function backPage(){
		uni.navigateBack()
	}
	const goXiangQing = () => {
		uni.navigateTo({
			url: '/pages/index/huodong/fabuxiangqing/fabuxiangqing'
		})
	}
	// 定义方法
	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex;
		}
	};

	const styleChange = (e) => {
		if (styleType.value !== e.detail.value) {
			styleType.value = e.detail.value;
		}
	};

	const colorChange = (e) => {
		if (styleType.value !== e.detail.value) {
			console.log(e.detail.value);
			activeColor.value = e.detail.value;
		}
	};
	const goFabu = () => {
		uni.navigateTo({
			url: '/pages/index/huodong/fabu/fabu'
		})
	};
</script>

<style scoped>
	@import url('@/common/app.css');

	.card {
		margin: 0;

		height: 1200rpx;
	}

	.uni-common-mt {
		margin-top: 30px;
	}

	.uni-padding-wrap {
		padding: 0px 30px;
	}

	.content {}

	.items {
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 50rpx 0;
		border-bottom: 1px solid lightgrey;
	}

	.items_left_top {
		color: black;
		margin-bottom: 10rpx;
	}

	.items_left_mid {

		margin-bottom: 10rpx;
	}

	.items_right button {
		color: white;
		font-size: 24rpx;
		background-color: #0863e7;
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 50rpx;
	}

	image {
		width: 25rpx;
		height: 25rpx;
	}

	.bottom {
		color: white;
		background-color: #0863e7;
		width: 500rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 100rpx;
		position: fixed;
		bottom: 100rpx;
		left: 125rpx;
		font-size: 30rpx;
	}

	.items2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 50rpx 0;
		border-bottom: 1px solid lightgrey;
	}
	.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}
	.back-icon { width: 30px; height: 30px;}	
	.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 80rpx; left: 47rpx; transform: translate(-50%, -50%); }
	.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 70rpx; left: 30rpx;}	       
			  
</style>